<template>
  <div class="container">
<div class="spans">
  <div class="span">姓名</div>
  <div class="span">真实姓名</div>
  <div class="span">收货地址</div>
  <div class="span">手机号</div>
</div>

<div class="inputs">
  <div> <el-input class="input" v-model="userName" placeholder="Please input" />
      <el-popconfirm @confirm="changeName()" title="确认修改？">
        <template #reference>
          <el-button type="success" :icon="Check"></el-button>
        </template>
      </el-popconfirm>
    </div>
    <div>
      <el-input class="input" v-model="realName" placeholder="Please input" />
      <el-popconfirm @confirm="changeRealName()" title="确认修改？">
        <template #reference>
          <el-button type="success" :icon="Check"></el-button>
        </template>
      </el-popconfirm>
    </div>
    <div>
      <el-input class="input" v-model="shippingAddress" placeholder="Please input" />
      <el-popconfirm @confirm="changeAddr()" title="确认修改？">
        <template #reference>
          <el-button type="success" :icon="Check"></el-button>
        </template>
      </el-popconfirm>
    </div>
    <div>
      <el-input class="input" v-model="phoneNumber" placeholder="Please input" />
      <el-popconfirm @confirm="changeNumber()" title="确认修改？">
        <template #reference>
          <el-button type="success" :icon="Check"></el-button>
        </template>
      </el-popconfirm>
    </div>
</div>
  </div>


</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter';
import {
  Check
} from '@element-plus/icons-vue'
import type { User, UserAttr } from '@/modle/User';
import { changeAddrApi, changeNameApi, changeNumberApi, changePasswdApi, changeRealNameApi } from '@/api/User';
import { ElMessage } from 'element-plus';

const store = useCounterStore()
const user  = store.getUser()
const userName = ref<string>()
userName.value = user?.userName
const shippingAddress = ref<string>()
shippingAddress.value = user?.shippingAddress
const phoneNumber = ref<string>()
phoneNumber.value = user?.phoneNumber
const realName = ref()
realName.value = user?.realName
const oldPasswd = ref()
const newPasswd = ref()
const repeatPasswd = ref()

const changeName = () => {
  changeNameApi({
    oldName:store.getUser()?.userName,
    newName:userName.value
  }).then(res => {
    if(res.data.code === 200){
          store.changeName(userName.value as string)
          ElMessage({
            message:res.data.msg,
            type: 'success'
          })
    }else{
      ElMessage({
            message:res.data.data,
            type: 'error'
          })
    }

  })
}

const changeAddr = () => {
  changeAddrApi({
    userName:store.getUser()?.userName,
    addr:shippingAddress.value
  }).then(res => {

    if(res.data.code === 200){
      store.changeAddr(shippingAddress.value as string )
          ElMessage({
            message:res.data.msg,
            type: 'success'
          })
    }else{
      ElMessage({
            message:res.data.data,
            type: 'error'
          })
    }

  })
}

const changePasswd = () => {
  if(newPasswd.value !== repeatPasswd.value) {
    ElMessage({
      message:'两次输入不一样',
      type: 'error'
    })
    return
  }
  changePasswdApi({
    userName:store.getUser()?.userName,
    newPasswd:repeatPasswd.value,
    oldPasswd:oldPasswd.value
  }).then(res => {
    if( res.data.code === 200) {
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
    }else {
      ElMessage({
        message: res.data.data,
        type: 'error'
      })
    }
  })

}

const changeRealName = () => {
  changeRealNameApi({
    realName:realName.value,
    userName:store.getUser()?.userName
  }).then(res => {
    if(res.data.code == 200){
      store.changeRealName(realName.value)
    }
  })
}

const changeNumber = () => {
  changeNumberApi({
    phoneNumber:phoneNumber.value,
    userName:store.getUser()?.userName
  }).then(res => {
    if(res.data.code==200){
      store.changePhoneNumber(phoneNumber.value as string)
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
    }
  })
}

</script>

<style scoped >
.input {
  width: 400px;

}
.container{
  display: flex;
  flex-direction: row;
  height: 300px;
  width: 600px;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: 0 6px 20px 0 rgba(37, 43, 50, .07);
}
.span {

}
.spans{
  display: flex;
flex-direction: column;
justify-content:space-around;
}
.inputs {
  display: flex;
flex-direction: column;
justify-content:space-around;
}

</style>